<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="order-contentPart">
    <div class="order-main">
        <!--搜索区域-->
        <div class="row rowNew">
            <div class="col-sm-12 search-area">
                <form id="formId">
                    <div class="select-list">
                        <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <input type="text" class="time-input" th:value="${beginTime}" id="startTime"
                                       placeholder="开始时间"
                                       name="params[beginPlanTime]"/>
                                <span>--</span>
                                <input type="text" class="time-input" th:value="${endTime}" id="endTime"
                                       placeholder="结束时间"
                                       name="params[endPlanTime]"/>
                            </li>
                            <li class="btn-group">
                                <a class="thisYear btn btn-primary mlr_8">本年</a>
                                <a class="thisMonth btn btn-primary mlr_8">本月</a>
                                <a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
        <!--统计区域-->

        <div class="row rowNew">
            <div class="statistics-area">
                <div class="statistics-list clearfix">
                    <div class="statistics-item col-xs-6 col-sm-4 col-lg-2" th:each="l:${list}">
                        <div th:id="${l.type}" th:class="'main color0'+ ${l.class} ">
                            <div class="indro" th:text="${l.key}">共计订单</div>
                            <div class="num" th:text="${l.value}">13858</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--图表区域-->
        <div class="row rowNew">
            <div class="echart-item col-sm-12">
                <div id="main" style="width:100%;height:460px;"></div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!--echart-->
<script th:src="@{/dist/libs/echarts/dist/echarts.min.js}"></script>

<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>

<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
<script>
    $(function () {

    });
</script>
<script th:inline="javascript" type="text/javascript">
    var ctx = [[@{
        /}]];
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option01 = {
            legend: {
                data: ['订单数'],
                right: '3%',
                selectedMode: false
            },
            title: {
                text: '订单数据展示表',
                x: 'center',
                textStyle: {
                    fontSize: 36,
                    color: '#2d353e'
                }
            },
            grid: {
                top: '20%',
                bottom: '6%',
                left: '7%',
                right: '5%'
            },
            xAxis: {
                data: [[${keys}]],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ebeef1'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#a3abb4',
                        fontSize: 14,
                    }
                }
            },
            yAxis: {
                name: '单',
                nameTextStyle: {
                    color: '#a3abb4',
                    fontSize: 14,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ebeef1'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ebeef1'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#a3abb4',
                        fontSize: 14,
                    }
                }
            },
            series: [{
                name: '订单数',
                type: 'bar',
                barWidth: 12,
                emphasis: {
                    itemStyle: {
                        color: '#52adff'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#52adff',
                        barBorderRadius: [0, 0, 0, 0],
                    }
                },
                data: [[${cf}]],
            }, {
                name: 'a',
                tooltip: {
                    show: false
                },
                type: 'bar',
                barWidth: 12,
                emphasis: {
                    itemStyle: {
                        color: '#2e9bff'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#2e9bff',
                        barBorderRadius: [0, 0, 0, 0]
                    }
                },
                data: [[${cf}]],
                barGap: 0,
                legendHoverLink: false,
            }, {
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        color: '#73bbff',
                    }
                },
                symbol: 'image://',
                symbolRotate: 0,
                symbolSize: ['24', '10'],
                symbolOffset: ['0', '5'],
                symbolPosition: 'start',
                data: [[${cf}]],
                z: 3
            }, {
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        color: '#73bbff',
                    }
                },
                symbol: 'image://',
                symbolRotate: 0,
                symbolSize: ['24', '10'],
                symbolOffset: ['0', '-5'],
                symbolPosition: 'end',
                data: [[${cf}]],
                z: 3
            }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option01);

        $(".main").click(function () {
                $(".main").removeClass("active");
                $(this).addClass("active");

                var link = ctx + 'system/front_ordercf/frontOrderCf?type=' + $(this).attr('id');

                var s = $('#startTime').val();
                var e = $('#endTime').val();

                link += "&beginTime=" + s + "&endTime=" + e;

                $.modal.openTab("订单列表", link);
            }
        )
        ;

        function reloadIt() {
            var link = ctx + "system/front_ordercf/orderManage04";
            var s = $('#startTime').val();
            var e = $('#endTime').val();

            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }

        $('.thisYear').click(function () {
            $('#startTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });

        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });
</script>
</body>
</html>
